<template>
    <div class="navbar-side">
        <div class="sidebar-collapse">
            <ul class="nav in">
                <li :class="{'active':$route.name=='goodspage'}">
                    <a href="###" @click.prevent="goToPage('goodspage')">
                        <i class="fa fa-commenting"></i>
                        <span class="nav-label">产品</span>
                    </a>
                </li>
                <li :class="{'active':$route.name=='orderpage'}">
                    <a href="###" @click.prevent="goToPage('orderpage')">
                        <i class="fa fa-tasks"></i>
                        <span class="nav-label">订单</span>
                    </a>
                </li>
                <li :class="{'active':$route.name=='promotionpage'}">
                    <a href="###" @click.prevent="goToPage('promotionpage')">
                        <i class="fa fa-check-square-o"></i>
                        <span class="nav-label">活动</span>
                    </a>
                </li>
                <li :class="{'active':$route.name=='userpage'}" v-if="$root.USER_GROUP_ID==0">
                    <a href="###" @click.prevent="goToPage('userpage')">
                        <i class="fa fa-share-square-o"></i>
                        <span class="nav-label">用户</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    import {tip,ajax} from '../tools/tools.js'

    export default {
        name: 'Sidemenu',
        data() {
            return {

            }
        },
        props: {

        },
        watch:{
            $route(v,ov){
                // console.log(v);
            }
        },
        methods: {
            goToPage(r){
                this.$root.$router.push({
                    name:r
                });
                
            }
        },
        mounted(){
            var v = this.$route;
            
        }
    }
</script>
<style scoped>
    .navbar-side {
        position: fixed;
        box-shadow: 3px 0 6px rgba(0, 0, 0, 0.3);
        top: 50px;
        left: 0px;
        bottom: 0px;
        width: 180px;
        background-color: #fff;
        z-index: 2;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .navbar-side li.active a {
        background-color: #5184d2;
        color: #fff;
    }
</style>